<template>
  <div>
    <el-form :model="formData" label-width="80px" ref="form" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="formData.cate_id" placeholder="选择分类">
          <el-option v-for="(item,index) in cates" :key="index" :value="item.id" :label="item.title" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <editor v-model="formData.content"/>
      </el-form-item>
      <el-form-item>  
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import editor from "@/components/Editor/editor.vue"
import {getall} from "@/api/article/cate.js"
import {create} from "@/api/article/index.js"
  export default {
    components:{
      editor
    },
    data(){
      return {
        formData:{
          title:'',
          cate_id:'',
          content:''
        },
        rules:{
          title:[
            {required:true,message:'请输入标题'}
          ],
          content:[
            {required:true,message:'请输入内容'}
          ]          
        },
        cates:[]
      }
    },
    created(){
      getall().then(res=>{        
        this.cates = res;
      })
    },
    methods:{
      submit(){
        this.$refs.form.validate(valid=>{
          if(valid){
            create(this.formData).then(res=>{
              this.$message.success("新增成功");
              this.$emit("success")
            })
          }          
        })
      }
    }
  }
</script>

<style scoped>

</style>